import { FC, useState } from 'react';
import Sform from './src/form';
import { Button, message, Table, Image } from 'antd';
import { ColumnsType } from 'antd/es/table';
import TableAction, {
  MenuItem,
} from '@/components/commonComponent/tableAction/tableAction';
import useRequest from '@ahooksjs/use-request';
import { getDatasets } from '@/api/sr-stms';
import { splitSearchParams } from '@/utils/common';
import { delete_dataset_id_api, downladDataset } from '@/api/sr-stms';
import { ProjectItem } from '.';
import { useAPDrawer } from '@/hooks/baseHook';
import APDrawer from './src/drawer';
import { useToggle } from 'ahooks';
import SyncModal from './src/syncModal';
import UploadModal from './src/uploadModal';

interface Iprops {
  selectedProject: ProjectItem | null;
}

const Content: FC<Iprops> = (props) => {
  const { selectedProject } = props;
  const {
    handleAddClick,
    handleClose,
    handleEditClick,
    record,
    visible,
    setRecord,
  } = useAPDrawer<any>();
  const [syncModalVis, { toggle: toggleSyncModalVis }] = useToggle(false);
  const [uploapModalVis, { toggle: toggleUploapModalVis }] = useToggle(false);
  const [searchParams, setSearchParams] = useState<SearchParam[]>([]);
  const { tableProps, refresh } = useRequest(
    ({ current, pageSize }) =>
      getDatasets({
        page: current,
        size: pageSize,
        search_params: [
          ...searchParams,
          {
            field_name: 'algorithm_name',
            operator: 'eq',
            value: selectedProject?.name,
          },
        ],
      }),
    {
      ready: !!selectedProject,
      paginated: true,
      refreshDeps: [searchParams, selectedProject],
      formatResult: (res) => ({
        list: res.data.list,
        total: res.data.totalElements,
      }),
    },
  );

  const columns: ColumnsType<any> = [
    { title: '编码', dataIndex: 'id' },
    { title: '数据集名称', dataIndex: 'dataset_name' },
    { title: '模型标识名称', dataIndex: 'algorithm_name' },
    { title: '图片数量', dataIndex: 'files_count' },
    {
      title: '操作',
      render: (text, record) => {
        return (
          <TableAction
            // editText="下载数据集"
            record={record}
            menuList={menuList}
            onEditClick={handleEditClick}
          ></TableAction>
        );
      },
    },
  ];

  const menuList: MenuItem<any>[] = [
    { name: '删除', fn: (record) => handleDelClick(record.id) },
    { name: '上传数据集', fn: (record) => handleUpload(record) },
    { name: '下载数据集', fn: (record) => handleDownload(record.dataset_name) },
    { name: '同步', fn: (record) => handleSyncClick(record) },
  ];

  const handleUpload = (record: any) => {
    toggleUploapModalVis(true);
    setRecord(record);
  };

  const handleSyncClick = (record: any) => {
    toggleSyncModalVis(true);
    setRecord(record);
  };

  const handleDownload = (dataset_name: string) => {
    downladDataset(dataset_name, {
      dataset_name,
    });
  };

  const handleDelClick = async (id: string) => {
    //调用删除接口
    await delete_dataset_id_api(id)();
    message.success('删除成功！');
    refresh();
  };

  /** 表单查询回调 */
  const formSearch = (vals: any) => {
    setSearchParams(splitSearchParams(vals));
  };

  /** 新增、编辑成功回调 */
  const drawerCallback = () => {
    refresh();
  };

  return (
    <div style={{ padding: 20, background: '#fff' }}>
      <UploadModal
        visible={uploapModalVis}
        onCancel={() => toggleUploapModalVis(false)}
        record={record}
      ></UploadModal>
      <SyncModal
        visible={syncModalVis}
        onCancel={() => toggleSyncModalVis(false)}
        record={record}
      ></SyncModal>
      <APDrawer
        visible={visible}
        record={record}
        onClose={handleClose}
        callback={drawerCallback}
      ></APDrawer>
      <Sform formSearch={formSearch}></Sform>
      <div style={{ marginBottom: 15 }}>
        <Button type="primary" onClick={handleAddClick}>
          新增
        </Button>
        {/* <Image src={window.config.SERVER_HOST + `/file/download?file_id=1456154904027602944`}></Image> */}
      </div>
      <Table
        {...tableProps}
        pagination={{
          ...tableProps.pagination,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total) => `总共 ${total} 条`,
        }}
        columns={columns}
        rowKey={(record) => record.id}
        bordered
      ></Table>
    </div>
  );
};

export default Content;
